import { Progress } from 'antd'
import { CSSProperties, useMemo } from 'react'

export type ProgressStatus = undefined | 'active' | 'exception' | 'success' | 'normal'

export type ProgressType = undefined | 'circle' | 'line' | 'dashboard'

export interface baseProps {
  class?: string
  style?: CSSProperties | undefined
  tabIndex?: number
}

/*
  value:进度条值
  showInfo:是否显示提示
  status: 线状态 仅限line
  isSmallSize : 仅限line
  width: 仅限园
*/
export interface ProgressProps extends baseProps {
  value: number
  showInfo?: boolean
  status?: ProgressStatus
  type?: ProgressType
  isSmallSize?: undefined | 'small'
  width?: number
  strokeColorForm?: string
  strokeColorTo?: string
  formatValue?: string
}

const ProgressComponent = (props: ProgressProps) => {
  const { value, showInfo, status, type, isSmallSize, width, strokeColorForm, strokeColorTo } = props

  const strokeColor = useMemo(() => {
    return strokeColorForm && strokeColorTo ? { '0%': strokeColorForm, '100%': strokeColorTo } : undefined
  }, [strokeColorForm, strokeColorTo])

  return (
    <>
      <Progress
        percent={value}
        showInfo={showInfo}
        status={status}
        type={type}
        size={isSmallSize}
        width={width}
        strokeColor={strokeColor}
        format={percent => <>{props.formatValue?.replace(/\{1\}/g, `${percent}`)}</>}
      />
    </>
  )
}
export default ProgressComponent
